<!DOCTYPE html>
<html>
	<head>
		<title>Mapping cells</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
		<style>
			table td {
				text-align: right;
			}
		</style>
	</head>
	<body>
		<div class='header_comment'>Mapping cells</div>
		<div class='sample_comment'>The sample shows the use of method mapCells(). The method allows you to get the current value of the specified cell and return some other value for it. If multiple cells are specified, the method is called for each of them by turn. Note, to work with the selected cells you can use method mapSelection(). </div>
		<div class='sample_comment'>Press tbe button to apply the mirror effect to the specified cells range.</div>
		<div id="testA"></div>
		<table>
			<tr><td>
				Row id:
				<select id="rows">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3" selected>3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
				</td><td>
					Rows number:
				<select id="numrows">
					<option value="null">All rows</option>
					<option value="1">1</option>
					<option value="2" selected>2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
				</td></tr><tr><td>
				Column id:
				<select id="cols">
					<option value="rank">#</option>
					<option value="title" selected>Film title</option>
					<option value="year">Released</option>
					<option value="votes">Votes</option>
				</select>
				</td><td>
				Columns number:
				<select id="numcols">
					<option value="null">All columns</option>
					<option value="1">1</option>
					<option value="2" selected>2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
				</td></tr>
		</table>
		<input type='button' value='mirror specified cells' onclick='mirror(grid)'>

		<script type="text/javascript" charset="utf-8">
		var grid;
		webix.ready(function(){
			grid = webix.ui({
				container:"testA",
				view:"datatable",
				columns:[
					{ id:"rank",	header:"", css:"rank",  		width:50},
					{ id:"title",	header:"Film title",width:200},
					{ id:"year",	header:"Released" , width:80},
					{ id:"votes",	header:"Votes", 	width:100}
				],
				autoheight:true,
				autowidth:true,
				data:small_film_set
			});		
		});

		function mirror(grid) {
			var startrow = document.getElementById("rows").value;
			var startcol = document.getElementById("cols").value;
			var numrows = document.getElementById("numrows").value;
			var numcols = document.getElementById("numcols").value;
			if (numrows == "null") numrows = null;
			if (numcols == "null") numcols = null;
			grid.mapCells(startrow, startcol, numrows, numcols, function(value, row, col, row_ind, col_ind){
				return value.toString().split("").reverse().join("");
			});
			grid.render();
		};
		</script>
	</body>
</html>